<template>
  <div>
    <FormPanel :list="topFilterList" :labelWidth="90" :cols="3" :isSubmitBtn="false" />
    <ButtonArea :containerStyle="{ paddingLeft: '90px' }">
      <el-button size="small" type="primary" @click="openComplaint('投诉单')">投诉单</el-button>
      <el-button size="small" type="primary" @click="openPrecontract('预约单')">预约单</el-button>
      <el-button size="small" type="primary" @click="clickHandleHf('80031002')">售后回访</el-button>
      <el-button size="small" type="primary" @click="clickHandleHf('80031003')">二手车回访</el-button>
    </ButtonArea>
    <SuperTabs :initialValue="defaultTabLabel" size="small">
      <tab-panel label="潜客跟进信息">
        <TableList :phone="caller" />
      </tab-panel>
      <tab-panel label="销售信息">
        <TableList1 :phone="caller" />
      </tab-panel>
      <tab-panel label="维修历史">
        <TableList2 :phone="caller" />
      </tab-panel>
      <tab-panel label="投诉信息">
        <TableList3 :phone="caller" />
      </tab-panel>
    </SuperTabs>
    <Drawer :visible.sync="visible" title="抽屉标题" width="calc(100vw - 200px)" :destroyOnClose="true">
      <div>asdasd</div>
    </Drawer>

    <Drawer :visible.sync="questionnaire" title="回访信息录入" destroyOnClose :width="1300" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <div class="wrapper">
        <VisitInputs :remindData="this.tmpData" :phone="this.phone" @close="closeVisit"></VisitInputs>
      </div>
    </Drawer>

    <Drawer :visible.sync="showComplaint" title="转投诉" width="1300" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Complaint ref="Complaint" :rowData="this.rowData" :flag="this.complaintFlag" @close="closeComplaint" />
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9999,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="closeComplaint">返 回</el-button>
      </div>
    </Drawer>
    <Drawer :visible.sync="showPrecontract" title="预约安排" width="1350" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Precontract ref="Precontract" :rowData="this.rowData" @close="closePrecontract" />
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9999,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="closePrecontract">返 回</el-button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { authority } from '@/utils/authMixin';

import TableList from './tabs/tableList';
import TableList1 from './tabs/tableList1';
import TableList2 from './tabs/tableList2';
import TableList3 from './tabs/tableList3';
import VisitInputs from '@/pages/customerRepair/afterSaleVisit/resultEntry/ctiVisitEdit.vue';
import Complaint from '@/pages/customerRepair/customerComplaint/customerComplaintReception';
import Precontract from '@/pages/repair/repairReception/precontractArrange';
// this.$router.push({ path: '/a/b/c', query: { a: 9 } });
// const query = this.$route.query || {};

export default {
  name: 'jzyCallcenter',
  components: {
    TableList,
    TableList1,
    TableList2,
    TableList3,
    VisitInputs,
    Complaint,
    Precontract
  },
  mixins: [dictionary, authority],
  data() {
    const query = this.$route.query || {};
    const callid = query.callid; // 呼叫 id
    const caller = query.caller; // 来电号码
    const called = query.called; // 经销商总机号
    const dtmfText = query.dtmfDesc ? `${query.dtmf}-${query.dtmfDesc}` : ''; // 客户按键
    console.log('CTI振铃测试：', callid, caller, called, dtmfText);
    return {
      callid, // 呼叫 id，为了测试下边把号码写死了
      caller, // 客户的来电号码，为了测试下边把号码写死了
      // caller: '18686868686',
      // callid: 1,
      questionnaire: false,
      tmpData: {},
      phone: '',
      showComplaint: false,
      complaintFlag: '',
      rowData: {},
      showPrecontract: false,
      topFilterList: [
        {
          type: 'INPUT',
          label: '来电号码',
          fieldName: 'caller',
          initialValue: caller,
          placeholder: '',
          readonly: true
        },
        {
          type: 'INPUT',
          label: '经销商总机号',
          fieldName: 'called',
          initialValue: called,
          placeholder: '',
          readonly: true
        },
        {
          type: 'INPUT',
          label: '客户按键',
          fieldName: 'dtmfText',
          initialValue: dtmfText,
          placeholder: '',
          readonly: true
        }
      ],
      defaultTabLabel: '潜客跟进信息',
      visible: false,
      title: ''
    };
  },
  methods: {
    clickHandle(title) {
      this.title = title;
      this.visible = true;
    },
    clickHandleHf(questionnaireType) {
      // alert(questionnaireType);
      this.tmpData.questionnaireType = questionnaireType;
      this.tmpData.callId = this.callid;
      this.phone = this.caller;
      this.questionnaire = true;
    },
    closeVisit() {
      this.questionnaire = false;
    },
    openComplaint() {
      this.rowData.phone = this.caller;
      this.rowData.callId = this.callid;
      this.complaintFlag = 2;
      this.showComplaint = true;
    },
    closeComplaint() {
      this.showComplaint = false;
    },
    openPrecontract() {
      this.rowData.phone = this.caller;
      this.rowData.callId = this.callid;
      this.showPrecontract = true;
    },
    closePrecontract() {
      this.showPrecontract = false;
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  height: calc(100vh - 134px);
  overflow-y: auto;
}
</style>
